<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.NOTIFICATION.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>

      <div class="free-demo-row">
        <h3 class="free-title">free-notification</h3>
        <p>{{'COMPONENT.NOTIFICATION' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>messages</free-table-cell>
              <free-table-cell>
                <ng-template><code>Array</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.NOTIFICATION.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>delay</free-table-cell>
              <free-table-cell>
                <ng-template><code>Number</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.NOTIFICATION.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>direction</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.NOTIFICATION.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;NotificationModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="open()">Notification</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;button fButton (click)="open()"&gt;Notification&lt;/button&gt;
              &lt;free-notification [messages]="messages"&gt;&lt;/free-notification&gt;
            </free-code>
            <h4>Javascript</h4>
            <free-code lang="javascript">
              open() &#123;
                this.messages.push(&#123;
                  title: 'Notification',
                  content: 'Your account has not been verified by email!'
                &#125;);
              &#125;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Theme</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton [theme]="'danger'" (click)="openErrorMessage()">Error</button>
            <button fButton [theme]="'warning'" (click)="openWarningMessage()">Warning</button>
            <button fButton [theme]="'info'" (click)="openInfoMessage()">Info</button>
            <button fButton [theme]="'success'" (click)="openSuccessMessage()">Success</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-notification [messages]="errors" theme="error"&gt;&lt;/free-notification&gt;
              &lt;free-notification [messages]="infos" theme="info"&gt;&lt;/free-notification&gt;
              &lt;free-notification [messages]="successes" theme="success"&gt;&lt;/free-notification&gt;
              &lt;free-notification [messages]="warnigs" theme="warning"&gt;&lt;/free-notification&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Avatar</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="openAvatarMessage()">Notification</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-notification [messages]="avatarMessages"&gt;&lt;/free-notification&gt;
            </free-code>
            <h4>Javascript</h4>
            <free-code lang="javascript">
              openAvatarMessage() &#123;
                this.avatarMessages.push(&#123;
                  title: 'Notification',
                  content: 'Your account has not been verified by email!' + new Date(),
                  avatar: 'assets/images/t_me.png'
                &#125;);
              }
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Sticky</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="openDelayMessage()">Notification</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-notification [messages]="delayMessages" [delay]="3000"&gt;&lt;/free-notification&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Direction</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 300px;">
              <free-select [options]="directions" [(ngModel)]="direction"></free-select>
              <button fButton (click)="openToolMessage()">Notification</button>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-notification [messages]="toolMessages"
                [direction]="direction['value']" [delay]="1500"&gt;&lt;/free-notification&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
  <free-notification [messages]="messages" [delay]="0"></free-notification>
  <free-notification [messages]="toolMessages"
                     [direction]="direction['value']" [delay]="1500"></free-notification>
  <free-notification [messages]="avatarMessages"></free-notification>
  <free-notification [messages]="delayMessages" [delay]="0"></free-notification>
  <free-notification [messages]="errors" theme="error"></free-notification>
  <free-notification [messages]="infos" theme="info"></free-notification>
  <free-notification [messages]="successes" theme="success"></free-notification>
  <free-notification [messages]="warnigs" theme="warning"></free-notification>
</div>
